<template>
  <el-menu router>
    <!-- 使用数据插槽，将一段html代码放到指定的位置，这里的title就是这个标签上的文字部分 -->
    <!-- 动态根据用户来 -->
    <!-- <el-sub-menu
      v-for="item in menuStore.menu"
      :key="item.id"
      :index="item.frontUrl">
      <template #title>{{item.name}}</template>
      <el-menu-item
      v-for="child in item.children"
      :key="child.id"
      :index="child.frontUrl">{{child.name}}</el-menu-item>
    </el-sub-menu> -->

    <!-- 硬编码：开发中列表全部展示 -->
    <el-sub-menu index="/SystemAdministration">
      <template #title>权限管理</template>
      <el-menu-item index="/user">用户列表</el-menu-item>
      <el-menu-item index="/role">角色列表</el-menu-item>
      <el-menu-item index="/permission">权限管理</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="/MerchandiseManagement">
      <template #title>商品管理</template>
      <el-menu-item index="/category">分类管理</el-menu-item>
      <el-menu-item index="/goods">商品信息管理</el-menu-item>
      <el-menu-item index="/marketing">营销管理</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="/LogManagement">
      <template #title>日志管理</template>
      <el-menu-item index="/logs">登入日志列表</el-menu-item>
      <el-menu-item index="/consumptionLogs">消费日志列表</el-menu-item>
    </el-sub-menu>
     <el-sub-menu index="/CommunityManagement">
      <template #title>社区服务管理</template>
      <el-menu-item index="/notice">消息管理</el-menu-item>
      <el-menu-item index="/complaints">投诉管理</el-menu-item>
      <el-menu-item index="/visitor">访客管理</el-menu-item>
      <el-menu-item index="/car">车位管理</el-menu-item>
      <el-menu-item index="/repair">维修管理</el-menu-item>
    </el-sub-menu>

  </el-menu>
</template>

<script setup>
import { userMenuStroe } from '@/stores/pinia';
const menuStore = userMenuStroe()
</script>

<style scoped lang='scss'>
  .el-sub-menu{
    //background-color: #f5f5f5;
     background-color: #ffffff;
    box-shadow: inset 0px -3px 5px rgba(0, 0, 0, 0.1); 
  }
  .el-menu-item{
    // background-color: #f5f5f5;
    background-color: #ffffff;
    box-shadow: inset 0px -3px 5px rgba(0, 0, 0, 0.1); 
  }
  .el-menu-item.is-active{
    background-color: rgba(121, 169, 227, 0.5);
    color: white;
  }
</style>